<template>
  <!-- 右边内容 -->
  <div class="container-datamanagement">

    <!-- 右边内容 第一排：数据源管理 -->
    <div class="container1">
      <div style="height: 15px; width: 5px; background-color: #394d5d"></div>
      <span style="margin-left: 10px; letter-spacing: 1px; color: #333333; font-size: 14px;">数据源管理</span>
    </div>

    <!-- 右边内容 第二排：添加数据源按钮 + 搜索框 -->
    <div class="container2">

      <!-- 按钮：添加数据源 -->
      <el-button plain @click="dialogFormVisible = true"
        style="height: 28px; width: 95px; margin-left: 10px;">添加数据源</el-button>

      <!-- 搜索框 -->
      <el-input v-model="inputSearchDS" ref="inputSearchDSRef" style="width: 250px; height: 30px; margin-left: 8px"
        size="large" placeholder="请输入检索内容" :suffix-icon="Search" />
    </div>

    <!-- 右边内容 第三排：数据源内容 -->
    <div class="grid-container">
      <div class="grid-item" v-for="item in data" :key="item.sjybh">
        <div style="float: left">
          <img style="width: 100px; height: 100px; margin-right: 20px; border-radius: 5px;" :src=item.tblj />
        </div>

        <!-- 数据源名称 -->
        <div style="float: left; text-align: left">
          <div>{{ item.sjymc }}</div>

          <!-- 数据源标签 -->
          <div style="margin-top: 8px">
            <span style="background-color: #f2f4f5; padding: 5px; color: #999999">{{ item.sjyjg }}</span>
            <span style="display: inline-block; width: 10px"> </span>
            <span style="background-color: #f2f4f5; padding: 5px; color: #999999">{{ item.sjylx }}</span>
          </div>

          <!-- 数据源时间 -->
          <div style="color: #999999; margin-top: 8px; letter-spacing: -1px;">创建时间：{{ item.cjsj.slice(0, 10) }}</div>

          <!-- 数据源三操作 -->
          <div class="container">
            <img src="@/assets/images/编辑.png" style="margin-left: 1px; margin-top: 7px;" @click="edit(item)">
            <el-popconfirm title="确定要删除吗？" confirm-button-text="确定" cancel-button-text="取消" @confirm="del(item)">
              <template #reference>
                <img src="@/assets/images/删除.png" style="margin-left: 20px; margin-top: 7px;">
              </template>
            </el-popconfirm>
            <img src="@/assets/images/关联.png" style="margin-left: 20px; margin-top: 7px;">
          </div>
        </div>
        <div style="clear: both"></div>
      </div>
    </div>

    <!-- 对话框1 添加数据源 其一 -->
    <el-dialog v-model="dialogFormVisible" draggable class="dialog1" width=770px :show-close="false">

      <!-- 对话框1 头部 -->
      <template #header>
        <div style="color: white; padding-top: 10px; padding-bottom: 0px; margin-left: 10px;">
          创建数据源
        </div>
      </template>
      <el-form ref="ruleFormRef" :model="ruleForm" :size="formSize">

        <!-- 对话框1 第一排 数据源结构 -->
        <div class="container-dialog-1">

          <!-- 对话框1 第一排 选项一 结构化数据源 -->
          <div style="float: left; height: 160px; width: 182.5px;">
            <div class="struct1" :class="{ 'gray-bg': activeStruct === 'struct1' }"
              @click="setDataSourceStruct('struct1')">
              <img src="@/assets/images/结构化数据源.png"
                style="width: 52px; height: 52px; margin-left: 34px; margin-top: 23px ">
              <div style="margin-left: 25px; font-size: 14px;  margin-top: 8px;color: #333333;">结构化数据</div>
            </div>
          </div>

          <!-- 对话框1 第一排 选项二 非结构化文件 -->
          <div style="float: left; height: 160px; width: 182.5px;">
            <div class="struct2" :class="{ 'gray-bg': activeStruct === 'struct2' }"
              @click="setDataSourceStruct('struct2')">
              <img src="@/assets/images/非结构化文件.png"
                style="width: 52px; height: 52px; margin-left: 34px; margin-top: 23px">
              <div style="margin-left: 17px; font-size: 14px; margin-top: 8px;color: #333333;">非结构化文件</div>
            </div>
          </div>

          <!-- 对话框1 第一排 选项三 消息中间件 -->
          <div style="float: left; height: 160px; width: 182.5px;">
            <div class="struct3" :class="{ 'gray-bg': activeStruct === 'struct3' }"
              @click="setDataSourceStruct('struct3')">
              <img src="@/assets/images/消息中间件.png"
                style="width: 52px; height: 52px; margin-left: 34px; margin-top: 23px">
              <div style="margin-left: 25px; font-size: 14px; margin-top: 8px;color: #333333;">消息中间件</div>
            </div>
          </div>

          <!-- 对话框1 第一排 选项四 归档日志 -->
          <div style="float: left; height: 160px; width: 182.5px;">
            <div class="struct4" :class="{ 'gray-bg': activeStruct === 'struct4' }"
              @click="setDataSourceStruct('struct4')">
              <img src="@/assets/images/归档日志.png"
                style="width: 52px; height: 52px; margin-left: 34px; margin-top: 23px">
              <div style="margin-left: 32px; font-size: 14px; margin-top: 8px;color: #333333;">归档日志</div>
            </div>
          </div>
        </div>

        <!-- 对话框1 第二排 数据源类型 -->
        <div class="container-dialog-2">
          <div>

            <!-- 搜索框 -->
            <el-input style="width: 275px; height: 30px; margin-top: 20px; margin-left: 20px;" size="large"
              placeholder="请输入查询关键字" :suffix-icon="Search" />

            <!-- 查询 -->
            <el-button type="primary" color="#617d98"
              style="width: 70px; height: 30px;margin-top: 20px; margin-left: 10px;">查询</el-button>
          </div>

          <!-- 数据库选项 -->
          <div
            style="width: 90px; height: 90px; margin-top: 20px; margin-left: 20px; border-radius: 3px; border: solid 1px #d8d8d8;float: left;">
            <img src="@/assets/images/Dameng-w.png"
              style="width: 70px; height: 70px; margin-top: 10px; margin-left: 10px">
          </div>
        </div>

        <!-- 对话框1 第三排 按钮 -->
        <div class="container-dialog-3">

          <!-- 按钮：取消 -->
          <el-button type="primary" color="#dde2e9"
            style="width: 95px; height: 35px;margin-top: 20px; font-size: 14px; float: right; margin-right: 15px; color: #8292a8;"
            @click="dialogFormVisible = false">取消</el-button>

          <!-- 按钮：下一步 -->
          <el-button type="primary" color="#617d98"
            style="width: 95px; height: 35px;margin-top: 20px; font-size: 14px; float: right; margin-right: 15px"
            @click="nextDialog">下一步</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 对话框2 添加数据源 其二 -->
    <el-dialog v-model="dialogFormVisible2" draggable class="dialog1" width=770px>

      <!-- 对话框2 头部 -->
      <template #header>
        <div style="color: white; padding-top: 10px; padding-bottom: 0px; margin-left: 10px;">
          设置数据源参数
        </div>
      </template>
      <div class="container-dialog-4">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" :size="formSize" status-icon>

          <!-- 对话框2 第一排 数据源分类 -->
          <!-- 对话框2 第一排 左边 输入框 -->
          <el-row>
            <el-col :span="16" style="padding-top: 15px;">
              <el-form-item label="数据源分类:">
                <el-input style="width: 275px; height: 30px" v-model="ruleForm.dataSourceClassification" disabled />
              </el-form-item>
            </el-col>

            <!-- 对话框2 第一排 右边 图标 -->
            <el-col :span="8">
              <div style="font-size: 14px;color: #666666;  float: left; padding-top: 20px; margin-left: 30px;">数据源类型:
              </div>
              <img src="@/assets/images/Dameng-类型.png"
                style="height: 60px; width: 60px; border:1px solid #d8d8d8; margin-left: 40px; ">
            </el-col>
          </el-row>

          <!-- 对话框2 第二排 数据源名称 -->
          <el-form-item label="数据源名称:" prop="dataSourceName">
            <el-input style="width: 600px; height: 30px" v-model="ruleForm.dataSourceName" />
          </el-form-item>

          <!-- 对话框2 第三排 URL -->
          <el-form-item label="URL:" prop="dataSourceURL">
            <el-input style="width: 600px; height: 30px" v-model="ruleForm.dataSourceURL" />
          </el-form-item>

          <!-- 对话框2 第四排 用户名 -->
          <el-form-item label="用户名:" prop="user">
            <el-input style="width: 600px; height: 30px" v-model="ruleForm.user" />
          </el-form-item>

          <!-- 对话框2 第五排 密码 -->
          <el-form-item label="密码:" prop="password">
            <el-input style="width: 600px; height: 30px" v-model="ruleForm.password" type="password" />

          </el-form-item>

          <!-- 对话框2 第六排 模式 -->
          <el-row>
            <el-col :span="21">
              <el-form-item label="模式:" prop="mode">
                <el-input style="width: 530px; height: 30px" v-model="ruleForm.mode" />
              </el-form-item>
            </el-col>

            <el-col :span="1">
              <el-button style="background-color: #f2f4f5; color: #999999">
                加载
              </el-button>
            </el-col>
          </el-row>

          <!-- 对话框2 第七排 描述 -->
          <el-form-item label="描述:" prop="desc">
            <el-input style="width: 600px; height: 110px;" v-model="ruleForm.desc" type="textarea" rows="5" />
          </el-form-item>
        </el-form>
      </div>

      <!-- 对话框2 第八排 按钮 -->
      <div class="container-dialog-5">

        <!-- 对话框2 第八排 按钮 上一步 -->
        <el-button type="primary" color="#dde2e9"
          style="width: 95px; height: 35px;margin-top: 20px; font-size: 14px; float: right; margin-right: 15px; color: #8292a8;"
          @click="dialogFormVisible2 = false, dialogFormVisible = true">上一步</el-button>

        <!-- 对话框2 第八排 按钮 确定 -->
        <el-button type="primary" color="#617d98"
          style="width: 95px; height: 35px;margin-top: 20px; font-size: 14px; float: right; margin-right: 15px"
          @click="submitForm">确定</el-button>
      </div>
    </el-dialog>

    <!-- 对话框3 -->
    <el-dialog v-model="dialogFormVisible3" draggable class="dialog1" width=770px>

      <!-- 对话框3 头部 -->
      <template #header>
        <div style="color: white; padding-top: 10px; padding-bottom: 0px; margin-left: 10px;">
          编辑数据源参数
        </div>
      </template>
      <div class="container-dialog-4">
        <el-form ref="ruleFormRef2" :model="ruleForm2" :rules="rules2" label-width="auto" :size="formSize" status-icon>

          <!-- 对话框3 第一排 数据源分类 -->
          <!-- 对话框3 第一排 左边 输入框 -->
          <el-row>
            <el-col :span="16" style="padding-top: 15px;">
              <el-form-item label="数据源分类:" prop="dataSourceClassification">
                <el-input style="width: 275px; height: 30px" v-model="ruleForm2.dataSourceClassification" />
              </el-form-item>
            </el-col>

            <!-- 对话框3 第一排 右边 图标 -->
            <el-col :span="8">
              <div style="font-size: 14px;color: #666666;  float: left; padding-top: 20px; margin-left: 30px;">数据源类型:
              </div>
              <img src="@/assets/images/Dameng-类型.png"
                style="height: 60px; width: 60px; border:1px solid #d8d8d8; margin-left: 40px; ">
            </el-col>
          </el-row>

          <!-- 对话框3 第二排 数据源名称 -->
          <el-form-item label="数据源名称:" prop="dataSourceName">
            <el-input style="width: 600px; height: 30px" v-model="ruleForm2.dataSourceName" />
          </el-form-item>

          <!-- 对话框3 第三排 URL -->
          <el-form-item label="URL:" prop="dataSourceURL">
            <el-input style="width: 600px; height: 30px" v-model="ruleForm2.dataSourceURL" />
          </el-form-item>

          <!-- 对话框3 第四排 用户名 -->
          <el-form-item label="用户名:" prop="user">
            <el-input style="width: 600px; height: 30px" v-model="ruleForm2.user" />
          </el-form-item>

          <!-- 对话框3 第五排 密码 -->
          <el-form-item label="密码:" prop="password">
            <el-input style="width: 600px; height: 30px" v-model="ruleForm2.password" type="password" />

          </el-form-item>

          <!-- 对话框3 第六排 模式 -->
          <el-row>
            <el-col :span="21">
              <el-form-item label="模式:" prop="mode">
                <el-input style="width: 530px; height: 30px" v-model="ruleForm2.mode" />
              </el-form-item>
            </el-col>

            <el-col :span="1">
              <el-button style="background-color: #f2f4f5; color: #999999">
                加载
              </el-button>
            </el-col>
          </el-row>

          <!-- 对话框3 第七排 描述 -->
          <el-form-item label="描述:" prop="desc">
            <el-input style="width: 600px; height: 110px;" v-model="ruleForm2.desc" type="textarea" rows="5" />
          </el-form-item>
        </el-form>
      </div>

      <!-- 对话框3 第八排 按钮 -->
      <div class="container-dialog-5">

        <!-- 对话框3 第八排 按钮 取消 -->
        <el-button type="primary" color="#dde2e9"
          style="width: 95px; height: 35px;margin-top: 20px; font-size: 14px; float: right; margin-right: 15px; color: #8292a8;"
          @click="dialogFormVisible3 = false">
          取消</el-button>

        <!-- 对话框3 第八排 按钮 修改 -->
        <el-button type="primary" color="#617d98"
          style="width: 95px; height: 35px;margin-top: 20px; font-size: 14px; float: right; margin-right: 15px"
          @click="updateDataSource()">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
const inputSearchDS = ref('')

import { ref, reactive, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'

// 过滤搜索框
let oldData;
function searchDS() {
  // console.log("search当前数据源", data.value);
  // console.log("搜索关键字", inputSearchDS.value);
  const newData = oldData.filter(item => {
    // 检查字段是否包含关键字
    return item.sjymc.toLowerCase().includes(inputSearchDS.value.toLowerCase());
  });
  // console.log(newData)
  data.value = newData;
}
watch(inputSearchDS, () => {
  if (inputSearchDS.value != "")

    console.log("watch当前输入：", inputSearchDS.value);
  searchDS();
})

// 对话框1 添加数据源其一 四个选项数据
const activeStruct = ref(null); // 用来记录当前被点击的div的标识符  
// ruleForm.dataSourceStruct = '结构化数据源';

const setDataSourceStruct = (struct) => {

  activeStruct.value = struct; // 设置当前被点击的div的标识符  
  if (struct === 'struct1') {
    ruleForm.dataSourceStruct = '结构化数据源';
  } else if (struct === 'struct2') {
    ruleForm.dataSourceStruct = '非结构化文件';
  } else if (struct === 'struct3') {
    ruleForm.dataSourceStruct = '消息中间件';
  } else if (struct === 'struct4') {
    ruleForm.dataSourceStruct = '归档日志';
  }
};

// 对话框1 下一步
function nextDialog() {
  dialogFormVisible.value = false;
  dialogFormVisible2.value = true;
}

// 数据源三操作 编辑
function edit(item) {
  dialogFormVisible3.value = true;
  // console.log('修改当前数据源:', item.sjybh);
  ruleForm2.dataSourceClassification = item.sjyfl;
  ruleForm2.dataSourceName = item.sjymc;
  ruleForm2.dataSourceURL = item.url;
  ruleForm2.user = item.username;
  ruleForm2.password = item.password;
  ruleForm2.mode = item.mode;
  ruleForm2.desc = item.description;
  ruleForm2.dataSourceId = item.sjybh;
}

// 数据源编辑
async function updateDataSource() {
  dialogFormVisible3.value = false;
  // console.log("提交修改数据：", ruleForm2)
  await postUpdate(ruleForm2.dataSourceClassification, ruleForm2.dataSourceName, ruleForm2.dataSourceURL, ruleForm2.user,
    ruleForm2.password, ruleForm2.mode, ruleForm2.desc, ruleForm2.dataSourceId);
  fetchDataSource(catalogue.label);
  reSetForm2();
}

// Post 数据源编辑
const postUpdate = async (dataSourceClassification: string, dataSourceName: string, dataSourceURL: string,
  dataSourceUsername: string, dataSourcePassword: string, dataSourceMode: string, dataSourceDescription: string, dataSourceId: string) => {
  try {
    // console.log(dataSourceDescription)
    const response = await axios.post('http://localhost:8080/datasource/update',
      {
        dataSourceClassification,
        dataSourceName,
        dataSourceURL,
        dataSourceUsername,
        dataSourcePassword,
        dataSourceMode,
        dataSourceDescription,
        dataSourceId
      });
    alert(response.data.message)
  } catch (error) {
    alert("修改数据源失败（参数含空）");
  }
};

// 数据源三操作 删除
async function del(item) {
  // console.log('删除当前数据源:', item.sjybh);
  await delDataSource(item.sjybh);
  fetchDataSource(catalogue.label);
  reSetForm2();
}

// Get 数据源删除
const delDataSource = async (dataSourceId: string) => {
  try {
    const response = await axios.get('http://localhost:8080/datasource/delete', {
      params: {
        dataSourceId
      }
    });
    console.log(response.data.message);
  } catch (error) {
    console.error(error);
  }
};

// Get 请求数据源
const data = ref([]);
const fetchDataSource = async (dataSourceClassification: string) => {
  try {
    const response = await axios.get('http://localhost:8080/datasource/query', {
      params: {
        dataSourceClassification
      }
    });
    data.value = response.data.data;
    oldData = data.value;
    console.log("请求当前目录的数据源：", data.value);
  } catch (error) {
    console.error(error);
  }
};

// 组件通信接收
const catalogue = defineProps(['label'])
watch(catalogue, () => {
  console.log("当前数据目录：", catalogue.label)
  fetchDataSource(catalogue.label);
  ruleForm.dataSourceClassification = catalogue.label;
})

// 对话框1
const dialogFormVisible = ref(false)

// 对话框2
const dialogFormVisible2 = ref(false)
const dialogFormVisible3 = ref(false)
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import axios from 'axios';

// 对话框2 添加数据源 输入数据
interface RuleForm {
  dataSourceClassification: string
  dataSourceName: string
  dataSourceURL: string
  user: string
  password: string
  mode: string
  dataSourceStruct: string

  dataSourceType: string
  desc: string
}

// 对话框3 修改数据源数据 输入数据
interface RuleForm2 {
  dataSourceClassification: string
  dataSourceName: string
  dataSourceURL: string
  user: string
  password: string
  mode: string
  desc: string
  dataSourceId: string
}

// 输入数据的初始化
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleFormRef2 = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  dataSourceClassification: '',
  dataSourceName: '',
  dataSourceURL: '',
  user: '',
  password: '',
  mode: '',
  desc: '',

  dataSourceStruct: '',
  dataSourceType: 'dm',

})

const ruleForm2 = reactive<RuleForm2>({
  dataSourceClassification: '',
  dataSourceName: '',
  dataSourceURL: '',
  user: '',
  password: '',
  mode: '',
  desc: '',
  dataSourceId: ''
})

// 重置 对话框3 输入的数据
function reSetForm2() {
  ruleForm2.dataSourceClassification = '',
    ruleForm2.dataSourceName = '',
    ruleForm2.dataSourceURL = '',
    ruleForm2.user = '',
    ruleForm2.password = '',
    ruleForm2.mode = '',
    ruleForm2.desc = '',
    ruleForm2.dataSourceId = ''
};

// 对话框2 输入数据的规则与提示
const rules = reactive<FormRules<RuleForm>>({
  dataSourceName: [
    {
      required: true,
      message: '请输入数据源名称！',
      trigger: 'blur',
      // submit
    },
  ],
  dataSourceURL: [
    {
      required: true,
      message: '请输入URL！',
      trigger: 'blur',
    },
  ],
  user: [
    {
      required: true,
      message: '请输入用户名！',
      trigger: 'blur',
    },
  ],
  password: [
    {
      required: true,
      message: '请输入密码！',
      trigger: 'blur',
    },
  ],
  mode: [
    {
      required: true,
      message: '请输入模式！',
      trigger: 'blur',
    },
  ]
})

// 对话框3 输入数据的规则与提示
const rules2 = reactive<FormRules<RuleForm2>>({
  dataSourceClassification: [
    {
      required: true,
      message: '请输入数据源分类！',
      trigger: 'blur',
      // submit
    },
  ],
  dataSourceName: [
    {
      required: true,
      message: '请输入数据源名称2222！',
      trigger: 'blur',
      // submit
    },
  ],
  dataSourceURL: [
    {
      required: true,
      message: '请输入URL！',
      trigger: 'blur',
    },
  ],
  user: [
    {
      required: true,
      message: '请输入用户名！',
      trigger: 'blur',
    },
  ],
  password: [
    {
      required: true,
      message: '请输入密码！',
      trigger: 'blur',
    },
  ],
  mode: [
    {
      required: true,
      message: '请输入模式！',
      trigger: 'blur',
    },
  ]
})

// Post 创建数据源
const postDataSource = async (dataSourceStruct: string, dataSourceType: string, dataSourceClassification: string, dataSourceName: string, dataSourceURL: string,
  dataSourceUsername: string, dataSourcePassword: string, dataSourceMode: string, dataSourceDescription: string) => {
  try {
    // console.log(dataSourceDescription)
    const response = await axios.post('http://localhost:8080/datasource/create',
      {
        dataSourceStruct,
        dataSourceType,
        dataSourceClassification,
        dataSourceName,
        dataSourceURL,
        dataSourceUsername,
        dataSourcePassword,
        dataSourceMode,
        dataSourceDescription
      });
    alert(response.data.message);

  } catch (error) {
    console.error(error);
  }
};

// 创建数据源 提交按钮
async function submitForm() {
  activeStruct.value = null;
  dialogFormVisible2.value = false;
  await postDataSource(ruleForm.dataSourceStruct, ruleForm.dataSourceType, ruleForm.dataSourceClassification, ruleForm.dataSourceName, ruleForm.dataSourceURL, ruleForm.user,
    ruleForm.password, ruleForm.mode, ruleForm.desc);
  fetchDataSource(catalogue.label);
  reSetForm();
}

// 重置对话框1、2 的输入数据
function reSetForm() {
  ruleForm.dataSourceClassification = catalogue.label,
    ruleForm.dataSourceName = '',
    ruleForm.dataSourceURL = '',
    ruleForm.user = '',
    ruleForm.password = '',
    ruleForm.mode = '',
    ruleForm.desc = '',

    ruleForm.dataSourceStruct = '',
    ruleForm.dataSourceType = 'dm'
};
</script>

<style scoped>
.container-datamanagement {
  background-color: white;
  height: calc(100vh - 120px);
  width: calc(100% - 15px);
  border-radius: 5px;
  margin-top: 10px;
  margin-left: 5px;
}

.container1 {
  width: calc(100% - 20px);
  margin-left: 10px;
  height: 35px;
  border-bottom: 1px solid #c3c7cb;
  display: flex;
  align-items: center;
}

.container2 {
  width: 100%;
  height: 46px;
  display: flex;
  align-items: center;
}

.container-datasrc {
  width: 285px;
  height: 120px;
  border: solid 1px #dcdcdc;
  border-radius: 3px;
  float: left;
  margin-left: 10px
}

.container-datasrc-left {
  width: 120px;
  height: 120px;
  float: left;
}

.container-datasrc-right {
  width: 165px;
  height: 120px;
  float: left;
}

:deep(.el-dialog) {
  background-color: #2f3f4f;
  border-radius: 5px;
  width: 770px;
  height: 580px;
  padding: 0;
}

:deep(.el-dialog__title) {
  font-size: 16px;
  margin-left: 15px;
  color: #ffffffff;
}

:deep(.el-dialog__body) {
  background-color: #ffffff;
  border-radius: 0px 0px 5px 5px;
  width: 770px;
  height: 540px;
}

.container-dialog-1 {
  width: 730px;
  height: 160px;
  margin-left: 20px;
  margin-top: 20px;
  border: solid 1px #dcdcdc;
  border-radius: 5px;
  float: left;
}

.container-dialog-2 {
  width: 730px;
  height: 270px;
  margin-left: 20px;
  margin-top: 20px;
  border: solid 1px #dcdcdc;
  border-radius: 5px;
  float: left;
}

.container-dialog-3 {
  float: left;
  background-color: #f4f5f7;
  width: 770px;
  margin-top: 20px;
  height: 65px;
  border-radius: 0px 0px 5px 5px
}

.container-form-1 {
  background-color: antiquewhite;
  height: 475px;
}

.container-form-2 {
  float: left;
  background-color: #f4f5f7;
  width: 770px;
  height: 65px;
  border-radius: 0px 0px 5px 5px
}

.container-dialog-4 {
  width: 730px;
  height: 430px;
  margin-left: 20px;
  margin-top: 20px;
  float: left;
}

.container-dialog-5 {
  float: left;
  background-color: #f4f5f7;
  width: 770px;
  margin-top: 45px;
  height: 65px;
  border-radius: 0px 0px 5px 5px
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 14px;
  padding: 14px;
  padding-left: 10px;
  padding-top: 0px;
}

.grid-item {
  border-radius: 3px;
  height: 100px;
  border: solid 1px #dcdcdc;
  padding: 20px;
  text-align: center;
}

.struct1 {
  background-color: #f3f5f9;
  width: 120px;
  height: 120px;
  margin-top: 20px;
  margin-left: 31px;
  border-radius: 5px
}

.struct1:hover {
  background-color: rgb(211, 211, 211);
  width: 120px;
  height: 120px;
  margin-top: 20px;
  margin-left: 31px;
  border-radius: 5px
}

.struct2 {
  background-color: #f3f5f9;
  width: 120px;
  height: 120px;
  margin-top: 20px;
  margin-left: 31px;
  border-radius: 5px
}


.struct2:hover {
  background-color: rgb(211, 211, 211);
  width: 120px;
  height: 120px;
  margin-top: 20px;
  margin-left: 31px;
  border-radius: 5px
}

.struct3 {
  background-color: #f3f5f9;
  width: 120px;
  height: 120px;
  margin-top: 20px;
  margin-left: 31px;
  border-radius: 5px
}


.struct3:hover {
  background-color: rgb(211, 211, 211);
  width: 120px;
  height: 120px;
  margin-top: 20px;
  margin-left: 31px;
  border-radius: 5px
}

.struct4 {
  background-color: #f3f5f9;
  width: 120px;
  height: 120px;
  margin-top: 20px;
  margin-left: 31px;
  border-radius: 5px
}

.struct4:hover {
  background-color: rgb(211, 211, 211);
  width: 120px;
  height: 120px;
  margin-top: 20px;
  margin-left: 31px;
  border-radius: 5px
}

.gray-bg {
  background-color: rgb(211, 211, 211);
  width: 120px;
  height: 120px;
  margin-top: 20px;
  margin-left: 31px;
  border-radius: 5px
}
</style>